<template>
  <div>
    <div ref="dowebok" class="dowebok" id="dowebok">
      <!-- 注册 -->
      <div class="form-container sign-up-container">
        <form action="#">
          <h1>注册</h1>
          <div class="social-container">
            <a href="#" class="social">
              <img style="width: 32px;height: 32px" src="./img/weichart.svg" alt="">
            </a>
            <a href="#" class="social"><img style="width: 32px;height: 32px" src="./img/QQ.svg" alt=""></a>
            <a href="#" class="social"><img style="width: 32px;height: 32px" src="./img/dingding.svg" alt=""></a>
          </div>
          <span>或使用邮箱注册</span>
          <input tabindex="1" type="text" @blur="validUserName()" placeholder="请输入用户名" v-model="forms.username">
          <span v-show="userNameInputTip1 != ''" style="color: red">*{{userNameInputTip1}}</span>
          <input tabindex="2" type="password" @blur="validPassword()" placeholder="请输入密码" v-model="forms.password">
          <span v-show="passwordInputTip1 != ''" style="color: red">*{{passwordInputTip1}}</span>
          <input tabindex="3" @blur="validPassword()" type="password" v-model="forms.confirm" placeholder="请确认密码">
          <span v-show="passwordInputTip1 != ''" style="color: red">*{{passwordInputTip1}}</span>
          <button
            @click="handleRegister()">注册
          </button>
        </form>
      </div>

      <!-- 登录 -->
      <div class="form-container sign-in-container">
        <form action="#">
          <h1>登录</h1>
          <div class="social-container">
            <a href="#" class="social"><img style="width: 32px;height: 32px" src="./img/weichart.svg" alt=""></a>
            <a href="#" class="social"><img style="width: 32px;height: 32px" src="./img/QQ.svg" alt=""></a>
            <a href="#" class="social"><img style="width: 32px;height: 32px" src="./img/dingding.svg" alt=""></a>
          </div>
          <span>或使用您的帐号</span>
          <input tabindex="1" @blur="validUserName1()" type="text" v-model="loginForm.username" placeholder="请输入用户名">
          <span v-show="userNameInputTip != ''" style="color: red">*{{userNameInputTip}}</span>
          <input tabindex="2" @blur="validPassword1()" type="password" show-password="" v-model="loginForm.password"
                 placeholder="请输入密码">
          <span v-show="passwordInputTip != ''" style="color: red">*{{passwordInputTip}}</span>

          <div style="display: flex;flex-direction:row;justify-content: space-around;align-content: space-evenly">
            <input tabindex="3" v-model="loginForm.validCode" type="text" style="width: 50%;margin-left: -2px"
                   placeholder="验证码 ">
            <valid-code @input="createValidCode" style="margin-top:7px"></valid-code>
          </div>
          <a href="#" @click="open">忘记密码？</a>
          <button @keyup.enter.native="handleLogin()"
                  @click="handleLogin()">登录
          </button>
        </form>
      </div>
      <div class="overlay-container">
        <div class="overlay">
          <div class="overlay-panel overlay-left">
            <h1>已有帐号？</h1>
            <p>请使用您的帐号进行登录</p>
            <button class="ghost" @click="signIn" id="signIn">登录</button>
          </div>
          <div class="overlay-panel overlay-right">
            <h1>没有帐号？</h1>
            <p>立即注册加入我们，和我们一起开始旅程吧</p>
            <button class="ghost" @click="signUp" id="signUp">注册</button>
          </div>
        </div>
      </div>
    </div>
    <div>

    </div>
    <el-dialog
      style="top: 0px;"
      title="忘记密码"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form label-width="120px" :model="forms1" :rules="rules" ref="forms1">
        <el-form-item label="用户名" style="font-weight: bold" prop="username">
          <el-input v-model="forms1.username" placeholder="请输入用户名" style="width: 80%"></el-input>
        </el-form-item>

        <el-form-item label="密码" style="font-weight: bold" prop="password">
          <el-input v-model="forms1.password" type="password" placeholder="请输入新密码" show-password=""
                    style="width: 80%"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="reset" style="">重置</el-button>
    <el-button type="primary" @click="forget" style="margin-left: 150px ">修改密码</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import validate from '@/utils/validate'
  import ValidCode from '../../../components/ValidCode'


  export default {
    name: 'LoginAndRegister',
    components: { ValidCode, validate },
    data() {
      return {
        forms1: {},
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 2, max: 12, message: '长度在 2 到 12 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }
          ]
        },
        dialogVisible: false,
        forms: {
          username: '',
          password: ''
        },
        confirm: '',
        validCode: '',
        container: null,
        loginForm: {
          username: '',
          password: '',
          validCode: ''

        },
        isLoginAccess: {
          username: false,
          password: false
        },
        isLoginAccess1: {
          username: false,
          password: false
        },
        userNameInputTip: '',
        passwordInputTip: '',
        userNameInputTip1: '',
        passwordInputTip1: ''
      }
    },
    created() {

    },
    mounted() {
      this.container = this.$refs.dowebok
    },
    methods: {
      //重置密码
      reset() {
        request.put('/user/reset', this.forms1).then(res => {
          if (res.data.code === 20000) {
            this.$message({
              message: '密码重置成功，默认密码为:123456',
              type: 'success'
            })
            this.forms1.username=''
            this.dialogVisible = false
          } else {
            this.$message({
              message: res.data.msg,
              type: 'warning'
            })
          }

        })

      },

      //忘记密码
      forget() {
        this.$refs['forms1'].validate((valid) => {
          if (valid) {
            request.put('/user/forget', this.forms1).then(res => {
              console.log(res)
              if (res.data.code === 20000) {
                this.$message({
                  message: '密码修改成功',
                  type: 'success'
                })
                this.forms1 = {}
                this.dialogVisible = false
              } else {
                this.$message({
                  type: ' warning',
                  message: res.data.msg

                })
                this.dialogVisible = false
                this.forms1 = {}
              }
            })
          }
        })
      },

      open() {
        this.dialogVisible = true
      },
      //获取验证码
      createValidCode(data) {
        this.validCode = data
      },
      signIn() {
        this.container.classList.remove('right-panel-active')
      },
      signUp() {
        this.container.classList.add('right-panel-active')
      },
      //登录密码校验
      validPassword1() {
        let str = this.loginForm.password.trim()
        let flag = false
        let msg = ''
        if (str.length >= 6) {
          flag = true
          msg = ''
        } else if (0 < str.length && str.length < 6) {
          flag = false
          msg = '请输入6位以上的密码'
        } else {
          flag = false
          msg = '请输入密码'
        }
        this.isLoginAccess.username = flag
        if (flag) {
          // 写提示信息
          this.passwordInputTip = ''
        } else {
          this.passwordInputTip = msg
        }
      },

      //登录用户名校验
      validUserName1() {
        let str = this.loginForm.username.trim()
        let flag = false
        let msg = ''
        if (str.length >= 3) {
          flag = true
          msg = ''
        } else if (0 < str.length && str.length < 6) {
          flag = false
          msg = '请输入3位以上的用户名'
        } else {
          flag = false
          msg = '请输入用户名'
        }
        this.isLoginAccess.username = flag
        if (flag) {
          // 写提示信息
          this.userNameInputTip = ''
        } else {
          this.userNameInputTip = msg
        }
      },

      //注册校验
      validPassword() {
        let str = this.forms.password.trim()
        let flag = false
        let msg = ''
        if (str.length >= 6) {
          flag = true
          msg = ''
        } else if (0 < str.length && str.length < 6) {
          flag = false
          msg = '请输入6位以上的密码'
        } else {
          flag = false
          msg = '请输入密码'
        }
        this.isLoginAccess1.username = flag
        if (flag) {
          // 写提示信息
          this.passwordInputTip1 = ''
        } else {
          this.passwordInputTip1 = msg
        }
      },

      //注册校验
      validUserName() {
        let str = this.forms.username.trim()
        let flag = false
        let msg = ''
        if (str.length >= 3) {
          flag = true
          msg = ''
        } else if (0 < str.length && str.length < 6) {
          flag = false
          msg = '请输入3位以上的用户名'
        } else {
          flag = false
          msg = '请输入用户名'
        }
        this.isLoginAccess1.username = flag
        if (flag) {
          // 写提示信息
          this.userNameInputTip1 = ''
        } else {
          this.userNameInputTip1 = msg
        }
      },

//注册
      handleRegister() {
        this.validUserName()
        this.validPassword()
        if (true) {
          if (this.forms.password != this.forms.confirm) {
            this.$message({

              message: '两次密码输入不一致',
              type: 'error'

            })
            return
          }
          request.post('/user/register', this.forms).then(res => {
            console.log(res)

            if (res.code === 20000) {
              this.$message({
                message: '注册成功',
                type: 'success'

              })
              //this.$router.replace({path:'/login'}) //登录成功之后进行页面跳转
              this.forms.username = ''
              this.forms.password = ''
              this.forms.confirm = ''
            }
            else {
              this.$message({

                message: res.msg,
                type: 'error'

              })
            }
          })
        }
      },
      //登录接口
      handleLogin() {

        this.validUserName1()
        this.validPassword1()
        if (true) {
          if (!this.loginForm.validCode) {
            this.$message.warning('请填写验证码')
            return
          }
          if (this.loginForm.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
            this.$message.error('验证码错误')
            return
          }
          this.$store.dispatch('user/login', this.loginForm).then((res) => {
            console.log(res)
            this.$message({
              type: 'success',
              message: '登录成功'
            })
            sessionStorage.setItem('user', JSON.stringify(res.data))
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
           /* this.loginForm.username = '',
              this.loginForm.password = ''
            this.loginForm.validCode = ''*/
           this.loginForm={}
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }

      }
    }
  }
</script>

<style scoped>
  * {
    box-sizing: border-box;
  }

  body {
    font-family: 'Montserrat', sans-serif;
    background: #f6f5f7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: -20px 0 50px;
  }

  h1 {
    font-weight: bold;
    margin: 0;
  }

  p {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: .5px;
    margin: 20px 0 30px;
  }

  span {
    font-size: 12px;
  }

  a {
    color: #333;
    font-size: 14px;
    text-decoration: none;
    margin: 15px 0;
  }

  .dowebok {
    background: #fff;
    position: relative;
    overflow: hidden;
    width: auto;
    max-width: 100%;
    min-height: 480px;
    margin: 0 auto;
  }

  .form-container form {
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 0 50px;
    height: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .social-container {
    margin: 20px 0;
  }

  .social-container a {
    border: 1px solid #ddd;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin: 0 5px;
    height: 40px;
    width: 40px;
  }

  .social-container a:hover {
    background-color: #eee;
  }

  .form-container input {
    background: #eee;
    border: none;
    padding: 12px 15px;
    margin: 8px 0;
    width: 100%;
    outline: none;
  }

  button {
    border-radius: 20px;
    border: 1px solid #ff4b2b;
    background: #ff4b2b;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
    cursor: pointer;
  }

  button:active {
    transform: scale(.95);
  }

  button:focus {
    outline: none;
  }

  button.ghost {
    background: transparent;
    border-color: #fff;
  }

  .form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all .6s ease-in-out;
  }

  .sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
  }

  .sign-up-container {
    left: 0;
    width: 50%;
    z-index: 1;
    opacity: 0;
  }

  .overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform .6s ease-in-out;
    z-index: 100;
  }

  .overlay {
    background: #ff416c;
    background: linear-gradient(to right, #ff4b2b, #ff416c) no-repeat 0 0 / cover;
    color: #fff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateY(0);
    transition: transform .6s ease-in-out;
  }

  .overlay-panel {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    height: 100%;
    width: 50%;
    text-align: center;
    transform: translateY(0);
    transition: transform .6s ease-in-out;
  }

  .overlay-right {
    right: 0;
    transform: translateY(0);
  }

  .overlay-left {
    transform: translateY(-20%);
  }

  /* Move signin to right */
  .dowebok.right-panel-active .sign-in-container {
    transform: translateY(100%);
  }

  /* Move overlay to left */
  .dowebok.right-panel-active .overlay-container {
    transform: translateX(-100%);
  }

  /* Bring signup over signin */
  .dowebok.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
  }

  /* Move overlay back to right */
  .dowebok.right-panel-active .overlay {
    transform: translateX(50%);
  }

  /* Bring back the text to center */
  .dowebok.right-panel-active .overlay-left {
    transform: translateY(0);
  }

  /* Same effect for right */
  .dowebok.right-panel-active .overlay-right {
    transform: translateY(20%);
  }

</style>
